<template>
  <div>
    <form action="/">
      <van-field
        style="padding-left: 23px"
        left-icon="calendar-o"
        clickable
        readonly
        label="结算时间"
        name="ym"
        :value="listQuery.ym"
        placeholder="点击选择日期"
        @click="showPicker = true"
        clearable
      />
    </form>
    <van-popup v-model="showPicker" position="bottom">
      <van-datetime-picker
        type="year-month"
        title="选择年月"
        v-model="currentDate"
        @confirm="onConfirm"
        @cancel="showPicker = false"
        :formatter="formatter"
      />
    </van-popup>

    <van-tabs v-model="active">
      <van-tab title="商家结算账单">
        <van-cell-group v-for="item in accounts" :key="item.id">
          <template #title>
            <div class="group_title">
              <div class="l">{{ item.r_name }}</div>
              <div class="m">数量(张)</div>
              <div class="r">合计(元)</div>
            </div>
            <div class="group_title">
              <div class="l item">已结算:</div>
              <div class="m item center">{{ item.r_counts }}</div>
              <div class="r item center">{{ item.total_money }}</div>
            </div>
            <div class="group_title">
              <div class="l item">待结算:</div>
              <div class="m item center">{{ item.r_unused_counts }}</div>
              <div class="r item center">{{ item.unused_total_money }}</div>
            </div>
          </template>
          <div class="van-hairline--bottom"></div>
          <van-cell
            v-for="citem in item.children"
            :key="citem.id"
            :title="citem.r_card_name"
          >
            <template #title>
              <div class="group_title">
                <div class="l item" style="color: #000">
                  {{ citem.r_card_name }}
                </div>
                <div class="r item center">
                  面值:
                  <van-tag type="primary">{{ citem.r_card_amount }}元</van-tag>
                </div>
              </div>
            </template>
            <template #label>
              <div class="group_title">
                <div class="l item">已结算:</div>
                <div class="m item center">{{ citem.r_counts }}</div>
                <div class="r item center">{{ citem.total_money }}</div>
              </div>
              <div class="group_title">
                <div class="l item">待结算:</div>
                <div class="m item center">{{ citem.r_unused_counts }}</div>
                <div class="r item center">{{ citem.unused_total_money }}</div>
              </div>
            </template>
          </van-cell>
          <van-divider
            :style="{
              color: '#1989fa',
              borderColor: '#1989fa',
              padding: '0 16px',
            }"
          >
          </van-divider>
        </van-cell-group>
      </van-tab>
      <van-tab title="本店结算账单">
        <van-cell-group v-for="item in myAccounts" :key="item.id">
          <template #title>
            <div class="group_title">
              <div class="l">{{ item.r_name }}</div>
              <div class="m">数量(张)</div>
              <div class="r">合计(元)</div>
            </div>
            <div class="group_title">
              <div class="l item">已结算:</div>
              <div class="m item center">{{ item.r_counts }}</div>
              <div class="r item center">{{ item.total_money }}</div>
            </div>
            <div class="group_title">
              <div class="l item">待结算:</div>
              <div class="m item center">{{ item.r_unused_counts }}</div>
              <div class="r item center">{{ item.unused_total_money }}</div>
            </div>
          </template>
          <div class="van-hairline--bottom"></div>
          <van-cell
            v-for="citem in item.children"
            :key="citem.id"
            :title="citem.r_card_name"
          >
            <template #title>
              <div class="group_title">
                <div class="l item" style="color: #000">
                  {{ citem.r_card_name }}
                </div>
                <div class="r item center">
                  面值:
                  <van-tag type="primary">{{ citem.r_card_amount }}元</van-tag>
                </div>
              </div>
            </template>
            <template #label>
              <div class="group_title">
                <div class="l item">已结算:</div>
                <div class="m item center">{{ citem.r_counts }}</div>
                <div class="r item center">{{ citem.total_money }}</div>
              </div>
              <div class="group_title">
                <div class="l item">待结算:</div>
                <div class="m item center">{{ citem.r_unused_counts }}</div>
                <div class="r item center">{{ citem.unused_total_money }}</div>
              </div>
            </template>
          </van-cell>
          <van-divider
            :style="{
              color: '#1989fa',
              borderColor: '#1989fa',
              padding: '0 16px',
            }"
          >
          </van-divider>
        </van-cell-group>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
// import { mapGetters } from "vuex";
// import NavBar from "@/components/NavBar";
import { formatDateTime } from "@/utils/datetime";
import { wxBalanceAccountStats, wxMyBalanceAccountStats } from "@/api/card";

export default {
  name: "CardConsumes",
  components: {
    // NavBar,
  },
  props: ["retailer_id"],
  computed: {
    minDate() {
      let datetime = new Date();
      datetime = datetime.setFullYear(datetime.getFullYear() - 5);
      return new Date(datetime);
    },
  },
  data() {
    return {
      title: this.$route.meta.title,
      active: 0,
      accounts: [],
      myAccounts: [],
      currentDate: new Date(),

      loading: false,
      finished: false,

      myLoading: false,
      myFinished: false,

      showPicker: false,

      listQuery: {
        retailer_id: this.retailer_id,
        ym: formatDateTime(new Date(), "YYYY-MM"),
      },
    };
  },
  mounted() {
    this.onLoad();
  },
  methods: {
    onLoad() {
      this.getBalanceAccounts();
      this.getMyBalanceAccounts();
    },
    onSearch() {
      // console.log(val);
      this.accounts = [];
      this.myAccounts = [];

      this.onLoad();
    },

    formatter(type, val) {
      if (type === "year") {
        return `${val}年`;
      } else if (type === "month") {
        return `${val}月`;
      }
      return val;
    },

    onCancel() {
      this.accounts = [];
      this.myAccounts = [];

      this.ym = null;
      this.onLoad();
    },

    onConfirm(date) {
      console.log(date);
      this.showPicker = false;

      this.listQuery.ym = formatDateTime(date, "YYYY-MM");
      console.log(this.listQuery.ym);
      this.accounts = [];
      this.myAccounts = [];
      this.onLoad();
    },

    getBalanceAccounts() {
      this.loading = true;
      wxBalanceAccountStats(this.listQuery)
        .then((res) => {
          console.log(res);
          this.finished = true;
          this.loading = false;
          this.accounts = res.data;
        })
        .catch(() => {
          this.loading = false;
          this.finished = true;
          this.$notify({
            type: "danger",
            message: "获取数据失败！",
          });
        });
    },

    getMyBalanceAccounts() {
      this.loading = true;
      wxMyBalanceAccountStats(this.listQuery)
        .then((res) => {
          console.log(res);
          this.myFinished = true;
          this.myLoading = false;
          this.myAccounts = res.data;
        })
        .catch(() => {
          this.myLoading = false;
          this.myFinished = true;
          this.$notify({
            type: "danger",
            message: "获取数据失败!！",
          });
        });
    },
  },
};
</script>

<style  scoped>
/* .van-field__label {
  color: black;
}
.van-col {
  margin: 5px;
  padding: 0px;
} */

.van-cell-group__title {
  color: #000;
  font-size: 16px;
  line-height: 28px;
}
.group_title {
  display: flex;
  justify-content: space-between;
}
.l {
  flex: 3;
}
.m {
  flex: 1;
}
.r {
  flex: 1;
}
.center {
  text-align: center;
}
.group_title .item {
  font-size: 14px;
  color: #555;
}
.van-divider {
  line-height: 5px;
  margin-top: 5px;
}
.van-cell__title {
  flex: 1;
}
.van-cell__value {
  flex: 0;
}
.van-cell__label div {
  height: 28px;
}
.content .van-cell__title {
  flex: 1;
}
.content .van-cell__value {
  flex: 3;
}
</style>